import React, { useState, useEffect } from 'react'
import { Tabs, Input, DatePicker, Space, Button, Form } from 'antd';
import Tables from './table';
import dayjs from 'dayjs'
import "./Tab.less"
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
import { history, request } from "umi"
export default function Tab() {
    const activityStatus: any = {
        "1": "待审核",
        "2": "进行中",
        "3": "未开始",
        "4": "已驳回",
        "6": "已结束",
    }
    const tabPane = [
        { title: "全部", key: "0" },
        { title: "进行中", key: "2" },
        { title: "未开始", key: "3" },
        { title: "已结束", key: "6" },
        { title: "待审核", key: "1" },
        { title: "已驳回", key: "4" },
        { title: "草稿箱", key: "5" },
    ]
    const [aStatus, setaStatus] = useState([])
    const [isDraft, setIsDraft] = useState<any>()
    const [val, setVal] = useState("");
    const [stateTime, setStateTime] = useState("")
    const [endTime, setEndTime] = useState("")
    const [data, setData] = useState([]);
    const [key, setkey] = useState<any>()
    const [form] = Form.useForm()
    const [pages, setPages] = useState({
        page: 1,
        pageSize: 10
    })
    const [total, setTotal] = useState("")
    const onChangeTab = (key: string) => {
        form.resetFields()
        setPages({
            page: 1,
            pageSize: 10
        })
        setkey(key)
        let arr: any = []
        if (key != "0" && key != "5") {
            arr.push(key)
        }
        if (key == "5") {
            setIsDraft(1)
        }
        setaStatus(arr)
    };

    const createActive = (record: any) => {

        history.push({
            pathname: "/createActive",
            query: {
                record,
                titles: "cerate",
            }
        })
    }
    const ser = () => {
        let data = form.getFieldValue()
        setVal(data.activeName)
        if (data.activeTime) {
            let s = dayjs(data.activeTime[0]._d).format("YYYY-MM-DD")
            let e = dayjs(data.activeTime[1]._d).format("YYYY-MM-DD")
            setStateTime(s)
            setEndTime(e)
        }

        // console.log(data, "wqe")
    }
    const res = () => {
        form.resetFields()
    }
    const changeSer = (e: any) => {
        setVal(e.target.value)
    }
    const getList = () => {
        request('/campus/campusweb/activity/pageConditionQueryByCreatorId', {
            method: 'post',
            data: {
                ...pages,
                activityName: val,
                queryStartDate: stateTime,
                queryEndDate: endTime,
                activityStatus: aStatus,
                isDraft: isDraft
            }
        }).then((res) => {
            if (res.code == 200) {
                setTotal(res.data.total)
                res = res.data.rows.map((ele: any) => {
                    return {
                        activityName: ele.activityName,
                        creator: ele.creator,
                        gmtCreated: ele.gmtCreated,
                        activityStatus: ele.isDraft ? "草稿箱" : activityStatus[ele.activityStatus],
                        timeDate: `${ele.startDate}~${ele.endDate}`,
                        key: ele.id,
                        activityBasicId: ele.activityBasicId
                    }
                })

                setData(res)
            }
        })
    }
    const onChange = (e: any) => {
        let stateTime = dayjs(e[0]._d).format('YYYY-MM-DD')
        let endTime = dayjs(e[1]._d).format('YYYY-MM-DD')
        setStateTime(stateTime)
        setEndTime(endTime)
    }
    const getPages = (n: any, a: any) => {
        setPages({
            ...pages,
            page: n,
            pageSize: a
        })
    }
    useEffect(() => {
        getList()
    }, [aStatus, pages, val, stateTime, endTime])
    return (
        <div className='createActiveTab'>
            <h1>创建活动</h1>
            <Tabs defaultActiveKey="0" onChange={onChangeTab}>
                {
                    tabPane.map((ele: any) => (
                        <TabPane tab={ele.title} key={ele.key}>
                            <div className='createActiveTab-Item'>
                                <div>
                                    <Form form={form} style={{ display: "flex" }}>
                                        <Form.Item
                                            label="活动名称"
                                            name="activeName"
                                        >
                                            <Input className='input' placeholder='请输入' />
                                        </Form.Item>
                                        <Form.Item
                                            label="创建时间"
                                            name="activeTime"
                                            style={{ marginLeft: "40px" }}
                                        >
                                            <RangePicker />
                                        </Form.Item>
                                    </Form>

                                </div>
                                <div className='createActiveTab-Item-Btn'>
                                    <Button className='ser' onClick={ser}>搜索</Button>
                                    <Button className='res' onClick={res}>重置</Button>
                                </div>
                            </div>
                            <div className='createActiveTab-Item-create'>
                                <Button onClick={() => { createActive({ activityBasicId: "1" }) }}>+创建活动</Button>
                            </div>
                            <div>
                                <Tables keys={key} data={data} pages={pages} total={total} getPages={getPages}></Tables>
                            </div>
                        </TabPane>

                    ))
                }
            </Tabs>

        </div>
    )
}
